<template>
	<view>
		<u-navbar :title="$t('确认订单')"></u-navbar>
		<view class="wrap">
			<view class="address" @click="$.to('/pagesA/pages/my/address?state=1')" v-if="info.goods_type == 1">
				<view class="left">
					<image src="../../static/image/a1_.png" mode=""></image>
					<view v-if="!isAdd">{{$t('添加收货地址')}}</view>
					<view class="info" v-else>
						<view class="name">
							{{ address.fullname }}
							<text>{{ address.mobile }}</text>
						</view>
						<view class="add">
							{{ address.province + " " + address.city + " " + address.area + " " + address.detailed }}
						</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#ccc"></u-icon>
			</view>

			<view class="goodsBox">
				<view class="goods">
					<image :src="info.image" mode=""></image>
					<view class="goodsInfo">
						<view class="tit">{{ info.name }}</view>
						<!-- <view class="xinghao">
							型号：128GB;颜色：暗紫色（请勿现金支付）
						</view> -->
						<view class="price" style="margin-top: 20rpx" v-if="info.type == 1">
							{{$t('¥')}}{{ Number(info.price).toFixed(2) }}
						</view>
						<view class="price" style="margin-top: 20rpx; color: #fc7802" v-else>{{ Number(info.integral).toFixed(2)
              }}{{$t('幸运币')}}</view>
					</view>
				</view>
				<view class="row">
					<view>{{$t('购买数量')}}</view>
					<view>x{{ info.num }}</view>
				</view>
				<view class="row">
					<view>{{$t('运费')}}</view>
					<view class="hui" v-if="info.freight_value == 0">{{$t('免运费')}}</view>
					<view class="hui" v-else>{{$t('¥')}}{{ amount ? amount : info.freight_value }}</view>
				</view>
				<view class="row" v-if="buyType == 1">
					<view>{{$t('购前须知')}}</view>
					<view>{{$t('兑换的商品不支持七天无理由退款')}}</view>
				</view>
				<!-- <view class="row">
					<view>优惠券</view>
					<view class="hui n-flex-row">
						暂无可使用优惠券
						<u-icon name="arrow-right" ></u-icon>
					</view>
				</view> -->
				<view class="row">
					<view>{{$t('商品总价')}}</view>
					<view class="pri">{{$t('¥')}}{{ Number(info.price * info.num).toFixed(2) }}</view>
				</view>
				<view class="row" v-if="buyType == 1">
					<view>{{$t('幸运币价格')}}</view>
					<view class="pri">{{ Number(info.integral * info.num).toFixed(2) }}</view>
				</view>
				<view class="beizhu">
					<view class="">{{$t('备注信息')}}</view>
					<u-input v-model="remarks" type="textarea" height="50" :placeholder="$t('选填备注信息')" />
				</view>
			</view>

			<view class="box1" style="margin-top: 20rpx" v-if="info.type == 1">
				<u-radio-group style="display: block" width="34rpx" v-model="paymode" active-color="#000">
					<!-- 	<view class="rowitem payrow" @click="selectPay('wechat')" v-if="buyType == 2">
						<view class="l">
							<image src="../../static/image/weixinf.png" mode=""></image>
							微信
						</view>
						<u-radio name="wechat"></u-radio>
					</view> -->
					<!-- #ifdef APP-PLUS -->
					<view class="rowitem payrow" @click="selectPay('wechat')"
						v-if="buyType == 2 && app_wxpay_status == 1">
						<view class="l">
							<image src="../../static/image/weixinf.png" mode=""></image>
							{{$t('微信')}}
						</view>
						<u-radio name="wechat"></u-radio>
					</view>
					<view class="rowitem payrow" @click="selectPay('alipay')" v-if="buyType != 1">
						<view class="l">
							<image src="../../static/image/zhifubao.png" mode=""></image>
							{{$t('支付宝')}}
						</view>
						<u-radio name="alipay"></u-radio>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN || H5 -->
					<view class="rowitem payrow" @click="selectPay('wechat')" v-if="buyType == 2">
						<view class="l">
							<image src="../../static/image/weixinf.png" mode=""></image>
							{{$t('微信')}}
						</view>
						<u-radio name="wechat"></u-radio>
					</view>

				<!-- 	<view class="rowitem payrow" @click="selectPay('usdt')" v-if="buyType == 2">
						<view class="l">
							<image src="../../static/image/usdt.png" mode=""></image>
							{{$t('usdt')}}
						</view>
						<u-radio name="usdt"></u-radio>
					</view> -->


					<!-- #endif -->
					<view class="rowitem payrow" @click="selectPay('integral')" v-if="buyType == 1">
						<view class="l">
							<image src="../../static/image/xr.png" mode=""></image>
							{{$t('幸运币')}} <span class="lucky-num"
								v-if="luckyCoin">{{ Number(luckyCoin).toFixed(2) }}</span>
						</view>
						<u-radio name="integral"></u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="rule">
			<rich-text :nodes="rule"></rich-text>
		</view>
		<view style="height: 200rpx"></view>
		<view class="btm">
			<view class="btmbox">
				<view class="n-flex-row n-align-center">
					<view class="">
						<view v-if="buyType == 1">
							{{$t('共')}}{{ info.num }}{{$t('件')}} | {{$t('合计')}}：
							<text class="text">{{ Number(this.luckyCoin) < this.info.integral * this.info.num ? Number(info.price *
        info.num).toFixed(2) : '0.00' }}</text>
							<!-- <text class="text">{{ price_zj }}</text> -->
						</view>
						<view v-if="buyType == 2">
							{{$t('共')}}{{ info.num }}{{$t('件')}} | {{$t('合计')}}：{{$t('¥')}}
							<text class="text" style="color: #fc7802">
								{{ amount ? (Number(info.price) * Number(info.num) + Number(amount)).toFixed(2) :
        (Number(info.price) * Number(info.num) + Number(info.freight_value)).toFixed(2) }}
							</text>
							<!-- <text style="color: #fc7802">幸运币</text> -->
						</view>
						<view class="yun"
							v-if="info.freight_value != 0 && info.goods_type == 1 && Number(luckyCoin) != 0">
							<!-- (另需支付运费{{$t('¥')}}{{ amount ? amount : info.freight_value }}) -->
							({{ buyType == 2 ? '包含运费'+$t('¥') : '另需支付运费'+$t('¥') }}{{ amount ? amount : info.freight_value }})
						</view>
					</view>
					<button @click="submit" v-if="buyType == 1"
						:class="Number(this.luckyCoin) < Number(this.info.integral * this.info.num) && 'disabled'"
						:disabled="Number(this.luckyCoin) < Number(this.info.integral * this.info.num)">
						{{$t('提交订单')}}
					</button>
					<button @click="submit" v-else>{{$t('提交订单')}}</button>
				</view>
			</view>
		</view>
		<!-- 微信小程序支付弹窗 -->
		<u-popup v-model="mpWxPayModal" z-index="99999999999" mode="center"
			:mask-custom-style="{ background: 'rgba(0, 0, 0, 0.6)' }">
			<view class="mpWxPayPopup">
				<view class="bg">
					<img class="closeImg" src="https://sjmanghe.com/imageself/wx_xcx_modal_close.png"
						@click="mpWxPayClose" alt="img" />
					<img class="qrImg" :show-menu-by-longpress="true" :src="WxOffImg" alt="" />
					<img class="downImg" src="https://sjmanghe.com/imageself/wx_xcx_down_btn.png" @click="copyUrl"
						alt="img" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		app_type
	} from "@/utils/keyControl.js";

	export default {
		data() {
			return {
				remarks: "",
				paymode: "",
				info: "",
				address: "",
				isAdd: false, //是否有地址
				// #ifdef MP-WEIXIN
				paymode: "wechat",
				// #endif

				// #ifdef  H5
				paymode: "wechat",
				// #endif

				// #ifdef APP-PLUS
				paymode: "alipay",
				// #endif
				price_zj: 0,
				rule: "",
				buyType: 1, // 1幸运币 2 立即购买
				app_wxpay_status: null, //代表app微信支付开启，
				app_alipay_status: null, //代表app支付宝支付开启
				epay_alipay_status: null, //代表h5支付宝开启，
				epay_wxpay_status: null, //代表h5微信支付开启
				mpWxPayModal: false, //微信小程序支付弹窗
				WxOffImg: "", //微信公众号二维码
				appDownUrl: "", //微信小程序下载app地址
				luckyCoin: 0, // 拥有幸运币数量
				amount: '', // 支付运费
			};
		},
		onLoad() {
			this.getGeneral();
			this.info = uni.getStorageSync("goods");
			this.luckyCoin = uni.getStorageSync('user').integral; // 获取幸运币
			this.buyType = this.info.buyType;
			if (this.buyType == 1) {
				this.paymode = "integral";
			}
			if (this.buyType == 1 && Number(this.luckyCoin) < Number(this.info.integral * this.info.num)) {
				uni.showToast({
					title: this.$t('当前幸运币不足抵扣该商品'),
					icon: 'none',
					duration: 5000
				});
				return;
			}

			if (this.info.goods_type == 1) {
				this.getAddress();
				uni.$on("changeAddress", (addId) => {
					this.upDataAddress(addId);
				});
			}
			this.price_zj =
				this.info.price * this.info.num + Number(this.info.freight_value);
			this.getRule();
		},
		onUnload() {
			uni.removeStorageSync("goods");
			uni.$off("changeAddress");
		},
		methods: {
			getGeneral() {
				this.$http({
						url: "api/common/get_general",
					})
					.then((res) => {
						if (res.data.code == 1) {
							console.log(res.data.data, "res.data.datares.data.data");
							this.app_wxpay_status = res.data.data.app_wxpay_status; //代表app微信支付开启，
							this.app_alipay_status = res.data.data.app_alipay_status; //代表app支付宝支付开启
							this.epay_alipay_status = res.data.data.epay_alipay_status; //代表h5支付宝开启，
							this.epay_wxpay_status = res.data.data.epay_wxpay_status; //代表h5微信支付开启
						}
					})
					.catch((err) => {});
			},

			// 钱购买
			async submit() {
				if (!this.address && this.info.goods_type == 1) {
					this.$tip.tip(this.$t("请选择地址"));
					return;
				}
				if (this.paymode == "") {
					this.$tip.tip(this.$t("请选择支付方式"));
					return;
				}
				//#ifdef H5 || MP-WEIXIN
				//小程序微信支付弹窗
				if (this.paymode == "wechat") {
					let status = await this.mpWxPayFun();
					if (status == 2) {
						this.pay();
					}
				}
				//#endif
				//#ifndef MP-WEIXIN
				this.pay();
				//#endif
			},
			// //获取小程序是否弹窗支付
			// mpWxPayFun() {
			//   this.$http({
			//     url: "api/member/get_xn",
			//     data: {
			//       type: app_type,
			//     },
			//   }).then((res) => {
			//     if (res.data.code == 1) {
			//       let obj = res.data.data;
			//       //xiao_status 1开启 2关闭
			//       //lianjietiantian天天下载 lianjie 其他端
			//       this.mpWxPayModal = obj.xiao_status == 1 ? true : false;
			//       this.WxOffImg = obj.xiao_share_xiao_bg;
			//       this.appDownUrl = obj.lianjie;
			//       if (obj.xiao_status == 2) {
			//         this.pay();
			//       }
			//     }
			//   });
			// },
			mpWxPayClose() {
				this.mpWxPayModal = false;
			},
			// 复制链接
			copyUrl() {
				if (this.appDownUrl == "") {
					this.$tip.tip(this.$t("出错了，请稍后再试"));
					return;
				}
				let url = decodeURIComponent(this.appDownUrl);
				this.mpWxPayModal = false;
				uni.setClipboardData({
					data: url,
					success: () => {},
				});
			},
			pay() {
				if (this.buyType == 1) {
					// 幸运币支付运费
					this.$http({
						url: 'api/pay/go_goods_pay',
						data: {
							goods_id: this.info.id,
							num: this.info.num,
							paymode: 'integral',
							desc: this.remarks,
							address_id: this.address.id,
							// #ifdef H5
							client: 0,
							// #endif
							// #ifdef MP-WEIXIN
							client: 1,
							// #endif
							// #ifdef APP-PLUS
							client: 2
							// #endif
						}
					}).then((res) => {
						    if(res.data.code==8){
								
								 //0元免支付的
								 uni.redirectTo({
								 	url: '/pages/mall/paySuccexx'
								 });
							}else{
								 	this.$tip.tip(res.data.msg);
							}
								// setTimeout(() => {
								// 	uni.redirectTo({
								// 		url: "/pages/mall/paySuccexx",
								// 	});
								// }, 700);
							})
				} else {
					this.$http({
							url: "api/pay/go_goods_pay",
							data: {
								goods_id: this.info.id,
								num: this.info.num,
								paymode: this.paymode,
								desc: this.remarks,
								address_id: this.address.id,
								// #ifdef H5
								client: 0,
								// #endif
								// #ifdef MP-WEIXIN
								client: 1,
								// #endif
								// #ifdef APP-PLUS
								client: 2,
								// #endif
							},
						})
						.then((res) => {
							console.log(res);
							if (res.data.code == 1) {
								// #ifdef H5
								this.fun.go_h5pay(res.data.data);
								// #endif

								// #ifdef MP-WEIXIN
								this.fun
									.go_mpwxpay(res.data.data)
									.then((payres) => {
										this.$tip.tip(this.$t("支付成功"), "success");
										setTimeout(() => {
											uni.redirectTo({
												url: "/pages/mall/paySuccexx",
											});
										}, 700);
									})
									.catch((payerr) => {
										this.$tip.tip(this.$t("支付失败"));
									});
								// #endif

								// #ifdef APP-PLUS
								if (this.paymode == "wechat") {
									this.fun
										.go_appwxpay(res.data.data.pay_data)
										.then((payres) => {
											this.$tip.tip(this.$t("支付成功"), "success");
											setTimeout(() => {
												uni.redirectTo({
													url: "/pages/mall/paySuccexx",
												});
											}, 700);
										})
										.catch((payerr) => {
											this.$tip.tip(this.$t("支付失败"));
										});
								} else {
									this.fun
										.go_appalipay(res.data.data.pay_data)
										.then((payres) => {
											this.$tip.tip(this.$t("支付成功"), "success");
											setTimeout(() => {
												uni.redirectTo({
													url: "/pages/mall/paySuccexx",
												});
											}, 700);
										})
										.catch((payerr) => {
											this.$tip.tip(this.$t("支付失败"));
										});
								}
								// #endif
							}
							// else if (res.data.code == 8) {
							//   //0元免支付的
							//   uni.redirectTo({
							//     url: "/pages/mall/paySuccexx",
							//   });
							// } 
							else {
								this.$tip.tip(res.data.msg);
							}
						})
						.catch((err) => {});
					return;
				}
			},
			getRule() {
				this.$http({
						url: "api/common/get_agreement",
						data: {
							name: "delivery_rule",
						},
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.rule = res.data.data.content;
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			// 更新收货地址
			upDataAddress(id) {
				this.$http({
						url: "api/member/get_address",
						data: {
							address_id: id,
						},
					})
					.then((res) => {
						console.log(res, "dizhi");
						if (res.data.code == 1) {
							this.address = res.data.data;
							this.isAdd = true;
							this.getAmount(res.data.data);
						}
					})
					.catch((err) => {});
			},
			getAddress() {
				this.$http({
						url: "api/member/my_address",
					})
					.then((res) => {
						console.log(res);
						if (res.data.code == 1) {
							if (res.data.data.length == 0) {
								this.isAdd = false;
							} else {
								this.isAdd = true;
							}
							this.address = res.data.data[0];
							// 新加的获取地址code接口
							this.getAmount(res.data.data[0]);
						} else {
							this.$tip.tip(res.data.msg);
							this.isAdd = false;
						}
					})
					.catch((err) => {});
			},
			// // 新加的获取地址code接口
			// getAmount(item) {
			//   this.$http({
			//     url: 'api/goods/find_freight',
			//     data: {
			//       province_code: '',
			//       province_name: item.province
			//     }
			//   }).then((res) => {
			//     if (res.data.code == 1) {
			//       let fee = res.data.data;
			//       this.amount = fee ? fee.amount : '';
			//     } else {
			//       this.$tip.tip(res.data.msg);
			//     }
			//   });
			// },
			// 选择支付方式
			selectPay(mode) {
				this.paymode = mode;
				if (mode == "integral") {
					this.price_zj =
						this.info.integral * this.info.num + Number(this.info.freight_value);
				} else {
					this.price_zj =
						this.info.price * this.info.num + Number(this.info.freight_value);
				}
			},
		},
	};
</script>

<style>
	@import url("../../static/css/confirmOrder.css");
</style>
<style lang="scss">
	.mpWxPayPopup {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;

		.bg {
			width: 630rpx;
			height: 1050rpx;
			background: url("https://sjmanghe.com/imageself/dd_wx_xcx_bg.jpg") no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
			position: relative;

			.closeImg {
				width: 100rpx;
				height: 95rpx;
				position: absolute;
				left: 502rpx;
				top: 36rpx;
			}

			.qrImg {
				width: 280rpx;
				height: 293rpx;
				position: absolute;
				left: 173rpx;
				top: 430rpx;
			}

			.downImg {
				width: 300rpx;
				height: 95rpx;
				position: absolute;
				left: 163rpx;
				top: 880rpx;
			}
		}
	}
</style>